<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../public/javascripts/vexflow_dev.js"></script>
</head>

<body>
    <div id="vex1"></div>
    <div id="vex2"></div>

    <script>
        var vf = new Vex.Flow.Factory({ renderer: { elementId: 'vex1', width: 800, height: 300 } });
        var score = vf.EasyScore();
        var system = vf.System();
        system.addStave({
            voices: [score.voice(score.notes('C#4/q, b4/r, b4/r, B4/r'))]
        }).addClef('treble').addTimeSignature('4/4');
        system.addStave({
            voices: [score.voice(score.notes('C#3/q, B2, A2/8, B2, C#3/q', {
                clef: 'bass'
            }))]
        }).addClef('bass').addTimeSignature('4/4').addKeySignature('Ab');
        vf.draw();
    </script>

    <script>
        var vf = new Vex.Flow.Factory({ renderer: { elementId: 'vex2', width: 800, height: 300 } });
        var stave = vf.Stave({ y: 100 })

        var notes0 = [
            { keys: ['c/4'], duration: '4', stem_direction: -1 },
            { keys: ['d/4'], duration: '4', stem_direction: -1 },
            { keys: ['e/4'], duration: '4', stem_direction: -1 },
            { keys: ['f/4'], duration: '4', stem_direction: -1 },
            { keys: ['g/4'], duration: '4', stem_direction: -1 },
            { keys: ['a/4'], duration: '4', stem_direction: -1 },
            { keys: ['b/4'], duration: '4', stem_direction: -1 },
            { keys: ['c/5'], duration: '4', stem_direction: -1 },
        ].map(vf.StaveNote.bind(vf));

        var notes1 = [
            { keys: ['c/3'], duration: '4', clef: 'bass' },
            { keys: ['d/5'], duration: '4' },
            { keys: ['e/5'], duration: '4' },
            { keys: ['f/5'], duration: '4' },
            { keys: ['g/5'], duration: '4' },
            { keys: ['a/5'], duration: '4' },
            { keys: ['b/5'], duration: '4' },
            { keys: ['c/8'], duration: '4' },
        ].map(vf.StaveNote.bind(vf));

        var voice0 = vf.Voice()
            .setMode(Vex.Flow.Voice.Mode.SOFT)
            .addTickables(notes0);

        var voice1 = vf.Voice()
            .setMode(Vex.Flow.Voice.Mode.SOFT)
            .addTickables(notes1);

        stave.addClef('treble').addTimeSignature('4/4').addKeySignature('Ab');

        // Ab Major
        Vex.Flow.Accidental.applyAccidentals([voice0, voice1], 'Ab'); // 根据调号修改


        new Vex.Flow.Formatter()
            .joinVoices([voice0, voice1])
            .formatToStave([voice0, voice1], stave);
        vf.draw();
    </script>
</body>

</html>